<template>
  <a-modal
    v-model="show"
    :centered="true"
    :maskClosable="false"
    width="70%"
    ok-text="关闭"
    cancel-text="取消"
    @cancel="onClose"
    @ok="handleSubmit"
  >
    <div>
      <a-row class="menu-title">我的常用功能</a-row>
      <!--<a-row ></a-row>-->
        <div class="menu-list" style="text-align: center" v-for="item in userList" :key="item.id" >
          <span class="item">{{ item.name }}</span>
          <a-icon type="minus-circle" @click="deleteCommonMenus(item.id)"/>
        </div>

    </div>

    <div v-for="menu in treeList" :key="menu.key">
      <!-- <img :src="menu.style" :alt="menu.name" /> -->
      <a-row class="menu-title">{{ menu.text }}</a-row>
      <div
        v-for="child in menu.children"
        :key="child.key"
        style="text-align: center"
        class="menu-list"
      >
        <span class="item">{{ child.text }}</span>
        <a-icon type="plus-circle" @click="addCommonMenus(child.id)"/>


      </div>
    </div>

  </a-modal>
</template>
<script>
  export default {
    name: "MenuForm",
    props: {
      menuFormVisiable: {
        default: false,
      },
    },
    data() {
      return {
        userList: [],
        treeList: [],
      };
    },

    computed: {
      show: {
        get: function () {
          return this.menuFormVisiable;
        },
        set: function () {
        },
      },
    },
    mounted() {
      this.init();
    },
    methods: {
      deleteCommonMenus(id) {
        this.$delete('/admin/userCommonFun/deleteCommonMenus', {id}).then((r) => {
          this.$message.success('删除成功！')
          this.init()
        })
      },
      addCommonMenus(menuId) {
        this.$post('/admin/userCommonFun/addCommonMenus', {menuId}).then((r) => {
          this.$message.success('添加成功！')
          this.init()
        })
      },
      commonMenus(params = {}) {
        this.$get('/admin/userCommonFun/commonData').then((r) => {
          let data = r.data
          if (data != null) {
            this.userList = data
          }
        })
      },
      menusData(params = {}) {
        this.$get('/admin/userCommonFun/menusData', {
          ...params
        }).then((r) => {
          let data = r.data
          this.treeList = data.rows.children

        })
      },

      onClose() {
        this.$emit("close");
      },

      handleSubmit(menuIds) {
        this.$emit('success')
      },

      init() {
        this.menusData();
        this.commonMenus();
      },
    },
  };
</script>
<style lang="scss">
  .menu-list {
    margin: 10px 40px 10px 0px;
    display: inline-block;
  }

  .menu-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    vertical-align: initial;
    // padding-left: 18px;
    // margin-left: 18px;
    padding: 20px 0 4px 0;
  }

  .menu-list .item {
    height: 28px;
    line-height: 28px;
    display: inline-block;
    color: #333333;
    padding: 0px 9px;
    text-align: center;
    font-size: 13px;
    color: #666;
  }

  a-icon[type="minus-circle"] {
    color: red;
  }

  a-icon[ type="plus-circle"] {
    color: blue;
  }
</style>
